<html>
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>name card</title>
		<link rel="stylesheet" href="card.css" type="text/css" media="screen" />
		<link href="css/normalize.css" rel="stylesheet"/>
		<link href="css/idealforms/idealforms.css" rel="stylesheet"/>
		<link href="css/master.css" rel="stylesheet" media="screen"/>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script src="js/jquery.idealforms.js"></script>
		<script src="js/scripts.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("#btn2").bind('click',function(){
		        $(".more_items").hide('slow');
						$(".more").show('fast');
						$(".yincang").hide('fast');
		    });
			    $("#btn").bind('click',function(){
			        $(".more_items").show('slow');
							$(".more").hide();
							$(".yincang").show('fast');
			    });
			})
		</script>
</head>
<body>
<div style="position:absolute;top:10px;left:300px;">
	<form id="myform">
		<fieldset>
			<div>
				<label class="required">账号:</label>
				<input type="text" size="40" />
			</div>
  		
			<div>
				<label class="required">密码:</label>
				<input type="password" size="40"/>
			</div>
			<div class="more"><a id="btn">[更多]</a></div>
			<div class="yincang" style="display:none;"><a id="btn2">[隐藏]</a></div>
			<div class="more_items" style="display:none;">
			<div>
					<label>性别:</label>
					<ul>
						<label><input type="radio" name="radios" checked />男</label>
						<label><input type="radio" name="radios"/>女</label>
					</ul>
				</div>
			<div>
				<label>邮箱:</label>
				<input type="text" size="40"/>
			</div>
			<div>
				<label>电话:</label>
				<input type="text" size="40"/>
			</div>
			</div>
		</fieldset>
	</form>
</div>
<div style="position:absolute;top:300px;left:310px;">
	<div class="tag" style="position:absolute;top:60px;left:0px;">管理员</div>
	<div class="tag" style="position:absolute;top:60px;left:100px;">审核员</div>
	<div class="tag" style="position:absolute;top:60px;left:200px;">复审员</div>
	<div class="tag" style="position:absolute;top:60px;left:300px;">超级管理员</div>
	<div class="tag" style="position:absolute;top:60px;left:400px;">信息发布员</div>
	<div class="tag" style="position:absolute;top:60px;left:500px;">信息采集员</div>
	<div class="tag" style="position:absolute;top:60px;left:600px;">配置管理员</div>
	<div class="tag" style="position:absolute;top:60px;left:700px;">权限审核</div>
	<div class="name_card" style="position:absolute;top:100px;left:0px;">
	<div class="u_icon" style="position:absolute;top:10px;left:10px;">
		<img src="http://tp4.sinaimg.cn/1661556975/50/5596859386/1">
	</div>	
	<div class="nick_name" style="position:absolute;top:10px;left:80px;">
		<p><a href="#">龙之胤</a></p>
	</div>

	<div class="address" style="position:absolute;top:40px;left:80px;">
		<p>上海,长宁区</p>
	</div>

	<div class="fans_info" style="position:absolute;top:70px;left:-30px;">
		<ul class="userdata">
			<li>189</li>
			<li class="W_vline">|</li>
			<li>75</li>
			<li class="W_vline">|</li>
			<li>197</li>
		</ul>
		<ul class="userdata">
			<li><a href="#">关注</a></li>
			<li class="W_vline">|</li>
			<li><a href="#">粉丝</a></li>
			<li class="W_vline">|</li>
			<li><a href="#">微博</a></li>
		</ul>
	</div>
	<div class="p_icon" style="position:absolute;top:70px;left:130px;">
		<img src="sina.png" width="38" height="38"/>
	</div>
	<div class="check" style="position:absolute;top:2px;left:160px;">
		<img src="check.png" width="18" height="18">
	</div>
</div>

<div class="name_card" style="position:absolute;top:100px;left:200px;">
	<div class="u_icon" style="position:absolute;top:10px;left:10px;">
		<img src="http://tp1.sinaimg.cn/1943099804/50/5633580232/1">
	</div>	
	<div class="nick_name" style="position:absolute;top:10px;left:80px;">
		<p><a href="#">遥远的他</a></p>
	</div>

	<div class="address" style="position:absolute;top:40px;left:80px;">
		<p>美国,纽约州</p>
	</div>

	<div class="fans_info" style="position:absolute;top:70px;left:-30px;">
		<ul class="userdata">
			<li>189</li>
			<li class="W_vline">|</li>
			<li>75</li>
			<li class="W_vline">|</li>
			<li>197</li>
		</ul>
		<ul class="userdata">
			<li><a href="#">关注</a></li>
			<li class="W_vline">|</li>
			<li><a href="#">粉丝</a></li>
			<li class="W_vline">|</li>
			<li><a href="#">微博</a></li>
		</ul>
	</div>
	<div class="p_icon" style="position:absolute;top:70px;left:130px;">
		<img src="163.png" width="38" height="38">
	</div>
</div>

<div class="name_card" style="position:absolute;top:100px;left:400px;">
	<div class="u_icon" style="position:absolute;top:10px;left:10px;">
		<img src="http://tp4.sinaimg.cn/1196235387/50/5617541321/0">
	</div>	
	<div class="nick_name" style="position:absolute;top:10px;left:80px;">
		<p><a href="#">马伊琍</a></p>
	</div>

	<div class="address" style="position:absolute;top:40px;left:80px;">
		<p>中国,上海</p>
	</div>

	<div class="fans_info" style="position:absolute;top:70px;left:-30px;">
		<ul class="userdata">
			<li>189</li>
			<li class="W_vline">|</li>
			<li>75</li>
			<li class="W_vline">|</li>
			<li>197</li>
		</ul>
		<ul class="userdata">
			<li><a href="#">关注</a></li>
			<li class="W_vline">|</li>
			<li><a href="#">粉丝</a></li>
			<li class="W_vline">|</li>
			<li><a href="#">微博</a></li>
		</ul>
	</div>
	
	<div class="p_icon" style="position:absolute;top:70px;left:130px;">
		<img src="qq.png" width="38" height="38">
	</div>
	<div class="check" style="position:absolute;top:2px;left:160px;">
		<img src="check.png" width="18" height="18">
	</div>
</div>

<div class="name_card" style="position:absolute;top:100px;left:600px;">
	<div class="u_icon" style="position:absolute;top:10px;left:10px;">
		<img src="http://tp2.sinaimg.cn/1739928273/50/5627626357/0">
	</div>	
	<div class="nick_name" style="position:absolute;top:10px;left:80px;">
		<p><a href="#">苍井空</a></p>
	</div>

	<div class="address" style="position:absolute;top:40px;left:80px;">
		<p>日本</p>
	</div>

	<div class="fans_info" style="position:absolute;top:70px;left:-30px;">
		<ul class="userdata">
			<li>189</li>
			<li class="W_vline">|</li>
			<li>75</li>
			<li class="W_vline">|</li>
			<li>197</li>
		</ul>
		<ul class="userdata">
			<li><a href="#">关注</a></li>
			<li class="W_vline">|</li>
			<li><a href="#">粉丝</a></li>
			<li class="W_vline">|</li>
			<li><a href="#">微博</a></li>
		</ul>
	</div>
	<div class="p_icon" style="position:absolute;top:70px;left:130px;">
		<img src="sohu.png" width="38" height="38">
	</div>
</div>
</div>
</body>
</html>